<template>
    <div class="container">
        <p class="oneP">小程序推广的关键</p>
        <ul class="ul1">
            <li v-for="(item,index) in arr1" :key="index"  @mouseover="show(index)">
                <div :class="{bg:index==liIndex,nobg:index!=liIndex}">
                    <img :src="item[0]" :class="{opa:liIndex==index}">
                    <img :src="item[1]">
                </div>
                <div :class="{border:index==liIndex}">
                    <img src="../../assets/img/1微信小程序/切图/9.png">
                    <p>{{item[2]}}</p>
                    <p style="margin-bottom:35px;margin-top:12px;margin-top: 24px;font-size: 16px;color: rgb(34, 34, 34);">{{item[3]}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
require("../../assets/css/p.css")
const img1 = require("../../assets/img/luck/15.png")
const img2 = require("../../assets/img/luck/19.png")
const img3 = require("../../assets/img/luck/20.png")
const img4 = require("../../assets/img/luck/14.png")
const img5 = require("../../assets/img/luck/18.png")
const img6 = require("../../assets/img/luck/21.png")
export default {
    data(){
        return {
            arr1:[
                [img1,img4,"智能数字营销推广","打造优质营销方案"],
                [img2,img5,"整个百万媒体资源","精准投放用户"],
                [img3,img6,"通过运营服务，提高品牌传播和效果","在实际运作中产生的长线反应"]
            ],
            liIndex:1
        }
    },
    methods:{
        show(index){
            this.liIndex = index
        }
    }
}
</script>
<style scoped>
.container{
    width:1200px;
    margin: 0 auto;
    margin-top: 80px;
    overflow: hidden;
    text-align: center;
}
.ul1{
    overflow: hidden;
    margin-top: 60px;
}
.ul1>li{
    width:360px;
    /* height: 300px; */
    margin-left:60px;
    text-align: center;
    float: left;
    position: relative;
    margin-bottom: 80px;
}
.ul1>li:first-child{
    margin-left: 0;
}
.ul1>li>div:nth-child(1)>img:nth-child(2){
    position: absolute;
    top:80px;
}
.ul1>li>div:nth-child(2)>img:nth-child(1){
    margin-top: 20px;
}
.ul1>li>div:nth-child(2)>p:nth-child(2){
    margin-top: 24px;
    font-size: 16px;
    color:rgb(34, 34, 34);
}
.bg{
    background: url("../../assets/img/1微信小程序/切图/10.png");
}
.border{
    border:1px solid red;
    border-top: none;
}
.opa{
    opacity:0.8 ;
}
</style>